<!-- 订单详情 -->
<template>
	<view class="order-detail-wrap">
		<!-- 订单状态 -->
		<!-- <view class="detail-head" :style="orderDetail.consignee ? '' : 'height:120rpx'">
			<view class="state-box u-flex">
				<image class="state-img" :src="$IMG_URL + '/imgs/order/order_state1.png'" mode=""></image>
				<text>{{ orderDetail.status_desc }}</text>
			</view>
		</view> -->

		<!-- 收货地址 -->
		<view class="address-wrap" v-if="orderDetail.address">
			<view class="order-address-box">
				<view class="u-flex">
					<text class="address-username">{{ orderDetail.address.realname }}</text>
					<text class="address-phone">{{ orderDetail.address.mobile }}</text>
				</view>
				<view class="address-detail">
					{{ orderDetail.address.province }}{{ orderDetail.address.city }}{{ orderDetail.address.area }}{{ orderDetail.address.address }}
				</view>
			</view>
		</view>

		<view class="detail-goods u-p-b-30">
			<!-- 订单信息 -->
			<view class="order-list">
				<view class="order-item" v-for="order in orderDetail.goods" :key="order.goods_id">
					<view class="order-card" @tap="jump('/pages/goods/detail', { id: order.goods_id })">
						<shopro-mini-card :title="order.title" :image="$IMG_URL + order.thumb">
							<template #describe>
								<view class="order-sku text-right">
									<text class="order-num">x{{ order.number || 0 }}</text>
								</view>
							</template>
							<template #cardBottom>
								<view class="card-price-box u-flex">
									<text class="order-price font-OPPOSANS">￥{{ order.goods_price || 0 }}</text>
									<button class="u-reset-button status-btn"
										v-if="orderDetail.status_text">{{ orderDetail.status_text }}</button>
								</view>
							</template>
						</shopro-mini-card>
					</view>

					<view class="order-bottom u-flex">
						<!-- 退款原因 -->
						<!-- <view class="refund_msg" v-if="order.refund_msg">
							<text class="refund-title">退款原因：</text>
							{{ order.refund_msg }}
						</view>
						<view class="btn-box">
							<button @tap.stop="onConfirm(orderDetail.id, order.id)" class="u-reset-button btn1"
								:class="{ btn2: index + 1 === order.btns.length }" v-if="orderDetail.status == 2">
								确认收货
							</button>
							<button @tap.stop="onComment(orderDetail.id, order.id)" class="u-reset-button btn1"
								:class="{ btn2: index + 1 === order.btns.length }" v-if="orderDetail.status == 3">
								去评价
							</button>
							<button @tap.stop="jump('/pages/goods/detail', { id: order.goods_id })"
								class="u-reset-button btn1" :class="{ btn2: index + 1 === order.btns.length }"
								v-if="orderDetail.status == 3">
								再次购买
							</button>

						</view> -->
					</view>
				</view>
			</view>

			<view class="remark-box u-flex item-list u-p-30">
				<!-- <view class="item-title">备注</view> -->
				<input class="item-input" placeholder-class="input-pl" type="textarea" v-model="orderDetail.remark"
					placeholder="备注:" />
			</view>
			<view class="money-box u-m-t-30">
				<text class="money-title">共{{ orderDetail.total_num || '0' }}件商品 合计:</text>
				<text class="all-price font-OPPOSANS">{{ orderDetail.total_price || '0.00' }}积分</text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="notice-box" v-if="orderDetail.id">
			<view class="notice-box__content">
				<view class="notice-item--center u-flex">
					<text class="title">订单编号：</text>
					<text class="detail">{{ orderDetail.order_sn }}</text>
					<!-- <button class="u-reset-button copy-btn" @tap="onCopy(orderDetail.order_sn)">复制</button> -->
				</view>
				<view class="notice-item u-flex" v-if="orderDetail.expre_name">
					<text class="title">快递公司：</text>
					<text class="detail">{{ orderDetail.expre_name }}</text>
				</view>
				<view class="notice-item u-flex" v-if="orderDetail.expre_num">
					<text class="title">快递单号：</text>
					<text class="detail">{{ orderDetail.expre_num }}</text>
				</view>
				<view class="notice-item u-flex">
					<text class="title">下单时间：</text>
					<text class="detail">{{ orderDetail.createtime }}</text>
				</view>
				<view class="notice-item u-flex" v-if="orderDetail.status > 0">
					<text class="title">支付方式：</text>
					<text class="detail">{{ payType[orderDetail.pay_type] }}</text>
				</view>
				<view class="notice-item u-flex" v-if="orderDetail.status > 0">
					<text class="title">支付时间：</text>
					<text class="detail">{{ orderDetail.paytime }}</text>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="foot-wrap safe-area-inset-bottom">
			<view class="foot_box safe-area-inset-bottom">

				<view class="btn-box">
					<view>
						<button v-if="orderDetail.status == 0" @tap.stop="onCancel(orderDetail.id)"
							class="u-reset-button obtn2">取消订单</button>

						<!-- v-if="btn === 'pay'" -->
						<button v-if="orderDetail.status == 0" @tap.stop="onPay(orderDetail.id)"
							style="margin-top: 15px;" class="u-reset-button obtn2">立即支付</button>
						<button v-if="orderDetail.status == 2" @tap.stop="onConfirm(orderDetail)"
							class="u-reset-button obtn2">确认收货</button>
						<button v-if="orderDetail.status == 3"
							@tap.stop="jump('/pages/goods/detail', { id: order.goods_id })"
							class="u-reset-button obtn2">再来一单</button>
						<!-- <button v-if="btn === 'delete'" @tap.stop="onDelete(orderDetail.id)"
							class="u-reset-button delete-btn">删除</button>
						<button v-if="btn === 'express'" @tap.stop="onExpress(orderDetail.id)"
							class="u-reset-button obtn1">查看物流</button> -->
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="{ show: showPay }" @tap="closePayModal" style="z-index: 10080;">
			<view class="pay-method-dialog cu-dialog safe-area-inset-bottom u-p-30" @tap.stop
				style="border-radius: 20rpx 20rpx 0 0;">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">选择支付方式</view>
				</view>
				<view class="pay-box">
					<view class="u-flex u-row-between pay-item">
						<view class="u-flex">
							<image class="pay-img" src="/static/images/jifen.png" mode=""></image>
							<text>积分支付</text>
						</view>
						<text class="u-m-r-30">剩余积分：{{userInfo.score}}积分</text>
					</view>
				</view>
				<button class="u-reset-button pay-btn" @tap="confirmPay">确认支付
					￥{{ orderDetail.total_price || '0.00' }}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				time: 0,
				orderDetail: {},
				orderStatus: {
					'-2': '已关闭',
					'-1': '已取消',
					'0': '未付款',
					'1': '已付款',
					'2': '已完成'
				},
				payType: {
					wallet: '余额支付',
					wechat: '微信支付',
					alipay: '支付宝支付',
					iospay: 'ApplePay',
					score: '积分支付'
				},
				expressType: {
					express: '物流快递',
					selfetch: '到店/自提',
					store: '商家配送',
					autosend: '自动发货'
				},
				showPay: false,
				goods_info: {}
			};
		},
		onShow() {
			this.getOrderDetail();
			this.user()
		},
		onLoad() {},
		computed: {
			...mapGetters(['userInfo']),
			allNum() {
				if (this.orderDetail.item) {
					let items = this.orderDetail.item;
					let allPrice = 0;
					items.forEach(p => {
						allPrice += p.goods_num;
					});
					return allPrice;
				}
			}
		},
		methods: {
			...mapActions(['getUserInfo']),
			user() {
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 详情发货信息
			goDistribution(dispatchType, orderId, orderItemId) {
				this.jump('/pages/order/express/distribution-detail', {
					expressType: dispatchType,
					orderId: orderId,
					orderItemId: orderItemId
				});
			},
			// 订单详情
			getOrderDetail() {
				let that = this;
				uni.request({
					url: 'https://www.shiwangdaoju.cn/api/user.order/detail/orderSn/' + that.$Route.query.order_sn,
					method: 'GET',
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						console.log(res);
						if (res.data.code === 1) {
							that.orderDetail = res.data.data.info;
							console.log(that.orderDetail);
							// that.goods_info = res.data.info
							that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime,
								'yyyy-mm-dd hh:MM');
							that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');
						}

					}
				})

				// that.$http('order.detail', {
				// 	orderSn: that.$Route.query.order_sn
				// }).then(res => {
				// 	if (res.code === 1) {
				// 		that.orderDetail = res.data;
				// 		that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime, 'yyyy-mm-dd hh:MM');
				// 		that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');
				// 	}
				// });
			},
			// 复制
			onCopy(code) {
				let that = this;
				uni.setClipboardData({
					data: code,
					success: function(data) {
						that.$u.toast('已复制到剪切板');
					}
				});
			},

			// 确认收货
			onConfirm(id, itemId) {
				let that = this;
				uni.showModal({
					content: '是否确认收货？',
					confirmText: '确认',
					cancelText: '取消',
					confirmColor: '#E77817',
					success(res) {
						if (res.confirm) {
							that.$http('order.confirm', {
									order_sn: id.order_sn
								},
								'收货中...'
							).then(res => {
								console.log(res);
								if (res.code === 1) {
									that.$u.toast('收货成功');
									setTimeout(() => {
										that.getOrderDetail();
									}, 500)
								}
							});
						}
					}
				})
				// let that = this;
				// that.$http(
				// 	'order.confirm', {
				// 		id: id,
				// 		order_item_id: itemId
				// 	},
				// 	'确认中...'
				// ).then(res => {
				// 	if (res.code === 1) {
				// 		that.getOrderDetail();
				// 	}
				// });
			},

			// 申请售后
			onAftersale(orderId, orderItemId) {
				this.$Router.push({
					path: '/pages/order/after-sale/refund',
					query: {
						orderId: orderId,
						orderItemId: orderItemId
					}
				});
			},

			// 售后详情
			onAftersaleDetail(id) {
				this.jump('/pages/order/after-sale/detail', {
					aftersaleId: id
				});
			},

			// 取消订单
			onCancel(id) {
				let that = this;
				uni.showModal({
					content: '是否取消订单？订单取消后将会退回至购物车内！',
					confirmText: '确认',
					cancelText: '返回',
					confirmColor: '#E77817',
					success(res) {
						if (res.confirm) {
							that.$http('order.cancel', {
									order_id: id
								},
								'取消中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast('取消成功');
									setTimeout(() => {
										that.$Router.back();
									}, 500)
								}
							});
						}
					}
				})
				// let that = this;
				// that.$http(
				// 	'order.cancel', {
				// 		id: id
				// 	},
				// 	'取消中...'
				// ).then(res => {
				// 	if (res.code === 1) {
				// 		that.$Router.back();
				// 	}
				// });
			},

			// 立即支付
			onPay(id) {
				/* uni.navigateTo({
					url: `/pages/order/payment/method?orderId=${id}`
				}); */
				this.showPay = true;
			},
			// 发起支付
			confirmPay() {
				let that = this;
				// if (that.payType === 'wallet') {
				// uni.showModal({
				// 	title: '支付提示',
				// 	confirmColor: '#f0c785',
				// 	content: `是否确认使用积分支付:${that.orderDetail.total_price || '0.00'}元?`,
				// 	success: res => {
				// 		if (res.confirm) {
				that.$http('order.order_pay', {
					order_sn: that.orderDetail.order_sn,
					type: 'score'
				}, '加载中...').then((res) => {
					if (res.code === 1) {
						that.showPay = false
						that.$u.toast('支付成功');
						that.$Router.back();
					}
				})
				// 		}
				// 	}
				// });
				// } else {

				// }
			},
			closePayModal() {
				this.showPay = false;
			},

			// 删除订单
			onDelete(orderId) {
				let that = this;
				uni.showModal({
					title: '删除订单',
					content: '确定要删除这个订单么？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
								id: orderId
							}).then(res => {
								if (res.code === 1) {
									that.$Router.back();
								}
							});
						}
					}
				});
			},

			// 待评价
			onComment(orderId, orderItemId) {
				this.jump('/pages/goods/comment/add-comment', {
					orderId: orderId,
					orderItemId: orderItemId
				});
			},

			// 查看物流
			onExpress(orderId, orderItemId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							this.$u.toast('暂无包裹~');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.detail-head {
		background: linear-gradient(0deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 100%) no-repeat;
		background-size: 100% 180rpx;
		height: 180rpx;

		.state-box {
			padding: 30rpx 40rpx;
			color: rgba(#fff, 0.9);

			.state-img {
				width: 60rpx;
				height: 60rpx;
				// background: #ccc;
				margin-right: 40rpx;
			}
		}
	}

	// 收货地址
	.order-detail-wrap {
		padding: 30rpx;
	}

	.address-wrap {
		position: relative;
		min-height: 160rpx;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.order-address-box {
		background-color: #fff;
		min-height: 160rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);

		.address-username {
			margin-right: 20rpx;
			color: #E77817;
			font-size: 28rpx;
		}

		.address-phone {
			color: #292424;
			font-size: 24rpx;
		}

		.address-detail {
			font-size: 22rpx;
			font-weight: 500;
			color: rgba(41, 36, 36, .6);
			margin-top: 20rpx;
		}
	}

	.detail-goods {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 0 20rpx;

		.order-list {
			.order-item {
				&:last-child {
					border-bottom: 2rpx solid rgba(40, 44, 49, .1);
				}
			}

			.order-card {
				padding: 20rpx 0;

				.order-sku {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 500rpx;

					.order-num {
						margin-right: 10rpx;
					}
				}

				.card-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid rgba(207, 169, 114, 1);
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(168, 112, 13, 1);
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}

					.order-price {
						font-size: 26rpx;

						font-weight: 600;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			.refund_msg {
				font-size: 28rpx;
				color: #999;
				flex: 1;
				text-align: left;
			}

			.order-bottom {
				background: #fff;
				justify-content: flex-end;
				padding: 20rpx 0;

				.btn1 {
					width: 160rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(223, 223, 223, 1);
					border-radius: 30rpx;
					font-size: 26rpx;
					background: #fff;
					padding: 0;
					margin-right: 20rpx;
				}

				.btn2 {
					width: 160rpx;
					line-height: 60rpx;
					border: 1rpx solid rgba(213, 166, 90, 1) !important;
					border-radius: 30rpx;
					font-size: 26rpx;
					color: #d5a65a !important;
					padding: 0;
					background: #fff;
					margin-right: 20rpx;
				}
			}
		}

		// 备注
		.remark-box {
			margin-top: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			background-color: #F7F8F9 !important;

			.item-input {
				flex: 1;
				text-align: left;
				font-size: 28rpx;
			}

			.input-pl {
				color: #c4c4c4;
				text-align: left;
			}
		}

		.money-box {
			text-align: right;
			height: 60rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
			color: #E77817;

			.money-title {}

			.all-price {
				font-size: 36rpx;
			}
		}
	}

	// 收货信息、订单信息。
	.notice-box {
		background: #fff;
		margin-bottom: 20rpx;

		.notice-box__head {
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 80rpx;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 25rpx;
		}

		.notice-box__content {
			padding: 25rpx;

			.self-pickup-box {
				width: 100%;

				.self-pickup--img {
					width: 200rpx;
					height: 200rpx;
					margin: 40rpx 0;
				}
			}
		}

		.notice-item--center {
			margin-bottom: 10rpx;
		}

		.notice-item,
		.notice-item--center {
			height: 50rpx;
			align-items: flex-start;

			.title {
				font-size: 28rpx;
				color: #999;
				text-align: justify;
				text-align-last: justify;
				text-justify: distribute-all-lines;
				width: 140rpx;
			}

			.detail {
				font-size: 28rpx;
				color: #333;
				flex: 1;
				text-align: right;
			}

			.copy-btn {
				width: 100rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				padding: 0;
				background: rgba(238, 238, 238, 1);
				font-size: 22rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-left: 30rpx;
			}
		}

		.notice-item--center {
			align-items: center;
		}
	}

	// 订单价格信息
	.order-price-box {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.notice-item {
			height: 50rpx;

			.title {
				font-size: 28rpx;
				color: #999;
			}

			.detail {
				font-size: 28rpx;
				color: #333;
			}
		}

		.all-rpice-item {
			justify-content: flex-end;

			.all-price {
				font-size: 26rpx;
				color: #ff0000;
			}
		}
	}

	.foot-wrap {
		width: 750rpx;
	}

	.foot_box {
		width: 750rpx;
		padding: 30rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(238, 238, 238, 1);
		position: fixed;
		bottom: 0;
		left: 0;

		.btn-box {
			justify-content: flex-end;

			.delete-btn {
				background: #ffeeee;
				color: #e50808;
				width: 100%;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn1 {
				width: 100%;
				line-height: 80rpx;
				background: #E77817;
				border-radius: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				padding: 0;
			}

			.obtn2 {
				width: 100%;
				line-height: 80rpx;
				background: #E77817;
				border-radius: 20rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #fff;
				padding: 0;
			}
		}
	}

	.pay-method-dialog {
		background-color: #fff;
	}

	.head-box {
		.head-title {
			text-align: left;
			min-width: 160rpx;
			font-size: 28rpx;
			color: #282C31;
			line-height: 28rpx;
		}
	}

	.pay-box {
		.pay-item {
			height: 90rpx;
			padding: 0 30rpx;
			font-size: 26rpx;
			background: #fff;
			width: 750rpx;
			border-bottom: 1rpx solid #eeeeee;

			&:last-child {
				border-bottom: none;
			}

			.pay-img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 25rpx;
			}
		}
	}

	.pay-btn {
		width: 690rpx;
		line-height: 80rpx;
		background: #E77817;
		border-radius: 20rpx;
		color: rgba(#fff, 0.9);
		margin: 60rpx auto 0;
	}
</style>